<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-container {
            width: 300px;
            height: 300px;
            outline: 2px solid black;
            position: relative;
            overflow: hidden;
            left: 50%; /* to remove */
        }
        img {
            display: block;
        }
        img.native {
            width: 100%;
            height: auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .mask {
            position: absolute;
            z-index: 2;
            height: 150px;
            width: 150px;
            background: rgba(200, 200, 0, .5);
            display: none;
            cursor: move;
            overflow: hidden;
            outline: 1px solid white;
        }
        .img-container:hover .mask {
            display: block;
        }

        .mask img {
            position: absolute;
            width: 400%;
            height: auto;
            top: 200%;
            transform: translateY(-50%);
            z-index: 99999999;
        }
        

    </style>
</head>
<body>
    <div class="img-container">
        <img class="native" src="https://img0.baidu.com/it/u=1948664362,1933861799&fm=26&fmt=auto&gp=0.jpg" alt="">
        <div class="mask">
            <img class="inner-img" src="https://img0.baidu.com/it/u=1948664362,1933861799&fm=26&fmt=auto&gp=0.jpg" alt="">
        </div>
    </div>

    <script src="../lib/jquery.min.js"></script>
    <script>

        const container = document.querySelector('.img-container');
        const mask = document.querySelector('.mask');
        const innerImg = document.querySelector('.mask img');
        const outerImg = document.querySelector('.native');

        container.addEventListener('mousemove', function (e) {
            const x = e.clientX - container.offsetLeft - 75;
            const y = e.clientY - container.offsetTop - 75;

            const xMax = 300 - 150; // 容器宽度 - 自身宽度
            const xMin = 0;

            let realX = x;
            if (x < xMin) {
                realX = xMin;
            } else if (x > xMax) {
                realX = xMax;
            }

            const yMax = 300 - 150; // 容器高度 - 自身高度
            const yMin = 0;

            let realY = y;
            if (y < yMin) {
                realY = yMin;
            } else if (y > yMax) {
                realY = yMax;
            }
            
            const k = 300 / 150;

            mask.setAttribute('style', `
                top: ${ realY }px;
                left: ${ realX }px;
            `);

            innerImg.setAttribute('style', `
                top: calc(200% - ${ realY * k + realY }px);
                left: ${ - realX * k - realX }px;
            `);

        });

    </script>
</body>
</html>